import { defineStore } from 'pinia'
import { ref } from 'vue'
import settings from '@/config/settings'
import { useCssVar } from '@vueuse/core'

export const useSettingsStore = defineStore('settingsStore', {
  state: () => ({
    ...settings,
  }),
  getters: {
    changSettings() {
      return settings
    },
  },
  actions: {
    initSettings() {
      const elv = ref(null)
      this.setUseCss(elv, '--theme-color', this.app.themeColor)
      this.setUseCss(
        elv,
        '--menu-background-color',
        this.menu.menuBackgroundColor
      )
      this.setUseCss(elv, '--menu-text-color', this.menu.menuTextColor)
      this.setUseCss(
        elv,
        '--menu-active-text-color',
        this.menu.menuActiveTextColor
      )
    },
    // 设置全局的样式
    setUseCss(elv: any, key: any, color: string) {
      // 需要在根节点设置的样式值的key
      const colorVar = useCssVar(key, elv)
      colorVar.value = color
    },
  },
})
